<template>
  <div class="college-tabs main">
    <div class="df curpoin nav-box">
      <router-link
        v-for="item in activeListData"
        :key="item.code || index"
        :to="{ path: item.url, query: { collegecode } }"
        class="item-box"
        :class="{ activenav: isTabActive(item) }"
      >
        {{ item.name }}
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const collegecode = ref('');
const activeListData = ref([
  { name: '院校概况', code: '1', url: '/college/detail' },
  { name: '招生简章', code: '2', url: '/college/admissionsguide' },
  { name: '录取分数线', code: '3', url: '/college/detScoreLine' },
  { name: '招生计划', code: '4', url: '/college/enrollmentplan' },
  { name: '院校风采', code: '5', url: '/college/collegeimgs' },
  { name: '提前批招生计划', code: '6', url: '/college/preFraction' },
  { name: '提前批分数线', code: '7', url: '/college/tiqianpiScoreline' },
]);

const activeTab = computed(() => {
  return activeListData.value.find((tab) => route.path.startsWith(tab.url));
});

const isTabActive = (tab) => {
  return activeTab.value?.url === tab.url;
};

onMounted(() => {
  if (route.query.collegecode) {
    collegecode.value = route.query.collegecode;
  }
});
</script>

<style lang="scss" scoped>
.college-tabs {
  background: #fff;

  .nav-box {
    border-bottom: 1px solid var(--color-text);

    .item-box {
      padding: 10px 30px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      transition:
        background 0.3s,
        color 0.3s;

      &:hover {
        background: var(--hover-background, #f0f0f0);
        color: var(--hover-text, #000);
      }
    }
  }

  .activenav {
    background: var(--color-text);
    color: #fff;
  }
}
</style>
